// 连接状态指示器组件 - 基于用户需求说明1.3

import React from 'react';
import { Wifi, WifiOff, AlertTriangle, RefreshCw } from 'lucide-react';

interface ConnectionStatusProps {
  isConnected: boolean;
  connectionStatus: 'connecting' | 'connected' | 'disconnected' | 'error';
  onReconnect: () => void;
}

const ConnectionStatus: React.FC<ConnectionStatusProps> = ({
  isConnected,
  connectionStatus,
  onReconnect
}) => {
  const getStatusConfig = () => {
    switch (connectionStatus) {
      case 'connecting':
        return {
          icon: <RefreshCw size={16} className="animate-spin" />,
          text: '连接中...',
          color: 'text-warning-400',
          bgColor: 'bg-warning-600/20',
          borderColor: 'border-warning-500/30'
        };
      case 'connected':
        return {
          icon: <Wifi size={16} />,
          text: '智驾域已连接',
          color: 'text-success-400',
          bgColor: 'bg-success-600/20',
          borderColor: 'border-success-500/30'
        };
      case 'disconnected':
        return {
          icon: <WifiOff size={16} />,
          text: '连接断开',
          color: 'text-gray-400',
          bgColor: 'bg-gray-600/20',
          borderColor: 'border-gray-500/30'
        };
      case 'error':
        return {
          icon: <AlertTriangle size={16} />,
          text: '连接错误',
          color: 'text-danger-400',
          bgColor: 'bg-danger-600/20',
          borderColor: 'border-danger-500/30'
        };
      default:
        return {
          icon: <WifiOff size={16} />,
          text: '未知状态',
          color: 'text-gray-400',
          bgColor: 'bg-gray-600/20',
          borderColor: 'border-gray-500/30'
        };
    }
  };

  const statusConfig = getStatusConfig();

  return (
    <div className={`flex items-center gap-2 px-3 py-2 rounded-lg border ${statusConfig.bgColor} ${statusConfig.borderColor}`}>
      <div className={statusConfig.color}>
        {statusConfig.icon}
      </div>
      <span className={`text-sm font-medium ${statusConfig.color}`}>
        {statusConfig.text}
      </span>
      {!isConnected && connectionStatus !== 'connecting' && (
        <button
          onClick={onReconnect}
          className="ml-2 p-1 hover:bg-gray-700/50 rounded transition-colors"
          title="重新连接"
        >
          <RefreshCw size={14} className="text-gray-400 hover:text-white" />
        </button>
      )}
    </div>
  );
};

export default ConnectionStatus;
